<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery文件上传工具</title>
<style>
#thumb{
	width:200px;
	height:30px;
	line-height:30px;
	border:1px solid #DB1B1E;
	color:#0D9643;
	border-radius:5px;
}
#choose,#preview,#clear{
	width:100px;
	height:40px;
	line-height:40px;
	color:#EBD127;
	border:none;
	background:#876667;
	border-radius:5px;
}
</style>
</head>

<body>

<input type="file" name="file" id="file" style="display:none;" multiple>
<!--<button type="button" id="upload">上传</button>-->
<input type="text" name="" id="thumb" value="" readonly>
<input type="button" value="选择" id="choose">
<input type="button" value="预览" id="preview">
<input type="button" value="置空" id="clear">

<br>
<br>
<div id="up" name="file" style="text-align:center;width:300px;overflow:hidden;border:5px dashed #009966;cursor:pointer;border-radius:5px;color:#FF6666;">
<svg width="10em" height="10em" viewBox="0 0 16 16" class="bi bi-cloud-upload" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"/>
  <path fill-rule="evenodd" d="M7.646 4.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V14.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3z"/>
</svg>
<br>
点击选择图片或拖动图片至框内
</div>

<script src="jquery.js"></script>
<script src="jquery_upload_file.js"></script>
<script>
//$('#upload').click(function(){
//	jquery_upload_file('#file','server.php',{a:1},function(data){
//		console.log(data);
//		if(data.code==0){
//			alert('上传成功');	
//		}else{
//			alert('上传失败');	
//		}
//	});
//});
$('#choose').click(function(){
	$('#file').trigger('click');
});
//自动上传
$('#file').change(function(){
	jquery_upload_file_many('#file','server.php',{a:1},function(data){
		console.log(data);
		if(data.code==0){
			alert('上传成功');
			$('#thumb').val(data.url);
		}else{
			alert('上传失败');	
		}
	});
});

drag_upload_one('#up','server.php',{a:1},function(data){
	console.log(data);
});

</script>
</body>
</html>
